<script setup>
import { deleteTableRow } from '../../../../utils/utils'; 
const props = defineProps({
    ports: {
        type: Array
    }
})
// 定义添加端口的方法
const addPort = () => {
    
    const port = {
        name: '',
        containerPort: 8080,
        protocol: 'TCP'
    }
    if (props.ports == null || props.ports == undefined) {props.ports = []}
    props.ports.unshift(port)
}
</script>

<template>
  <el-table
  border
  :data="props.ports"
  height="300px"
  >
    <el-table-column align="center" prop="name" label="端口名称">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
                <el-input v-model.trim="scope.row.name" placeholder="端口名称"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column align="center" prop="containerPort" label="程序端口">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
                <el-input-number style="width: 100%;" :min="1" :max="65535" :controls="false" v-model.trim="scope.row.containerPort" placeholder="程序端口"/>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column align="center" prop="protocol" label="协议">
        <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0px;">
                <el-select v-model="scope.row.protocol" style="width: 100%;">
                    <el-option
                    v-for="item in ['TCP', 'UDP', 'SCTP']"
                    :key="item"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column align="center" prop="protocol" label="协议">
        <template #header>
            <el-button link type="primary" @click="addPort()">
                添加
            </el-button>
        </template>
        <template #default="scope">
            <el-button link type="warning" @click="deleteTableRow(props.ports, scope.$index)">
                删除
            </el-button>
        </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>
